<script setup>
import { onMounted, reactive } from "vue"
import { useRouter } from "vue-router";
import { getUserInfo, getOrderStatistic, loginOut } from "@/api"
import { showDialog } from "vant"
import { useI18n } from "vue-i18n";
import { formatPrice } from "@/utils"
import { EllipsisHorizontalIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
const { t } = useI18n();
const router = useRouter();

const state = reactive({
    tel: '',
    dayCompleteOrder: 0,
    completeOrders: 0,
    rebate: 0,
    level: 0,
    balance: 0
})
const goTo = (url) => {
    router.push(url)
}
onMounted(() => {
    init();
    getOrderStatistic().then(res => {
        state.balance = res.balance;
    })
})
const init = () => {
    getUserInfo().then(res => {
        state.tel = res.tel;
        state.dayCompleteOrder = res.dayCompleteOrder;
        state.completeOrders = res.completeOrders;
        state.rebate = res.rebate;
        state.level = res.vipDetail.level;
    }).catch(() => { })
}
const exit = () => {
    showDialog({
        message: t('Confirm to exit?'),
        showCancelButton: true,
        confirmButtonText: t('YES'),
        cancelButtonText: t('NO'),
    }).then(() => {
        // on close
        loginOut().then(() => {
            localStorage.removeItem('token');
            goTo('/login')
        });

    }).catch(() => {

    });
}
</script>
<style scoped>
.mine {
    background: url('@/assets/images/mine_bg.jpeg') center center no-repeat;
    background-size: 100% 100%;
    padding: 20px 15px;
    box-sizing: border-box;
}

.text-font-size {
    font-size: 16px;
}
</style>
<template>
    <div class="mine">
        <div class="h-[50px]">
            <img :src="`/images/VIP${state.level + 1}.png`" class="h-full w-auto object-cover">
        </div>
        <div class="mt-0.5 text-white text-xs text-font-size ">
            {{ $t('Phone number') }} ：{{ state.tel }}
        </div>
        <div class="flex text-white text-xs text-font-size gap-2">
            <div class="flex flex-col justify-center items-center gap-0">
                <div>
                    {{ $t('Order') }}
                </div>
                <div>
                    {{ state.dayCompleteOrder }}
                </div>
            </div>
            <div class="flex flex-col justify-center items-center">
                <div>
                    {{ $t('Finished') }}
                </div>
                <div class="value">
                    {{ state.completeOrders }}
                </div>
            </div>
            <div class="flex flex-col justify-center items-center">
                <div>
                    {{ $t('Commission') }}
                </div>
                <div>
                    {{ state.rebate }}
                </div>
            </div>
        </div>

        <div class="mt-0">
            <div class="flex justify-between text-black text-xs text-font-size">
                <div class="left">{{ $t('Complete schedule') }}</div>
                <div style="color: #dc3545;">{{ state.completeOrders }} / {{ state.dayCompleteOrder }}</div>
            </div>
            <div class="value">
                <!-- <div class="bg" v-show="state.completeOrders > 0" :style="`width:${state.completeOrders / state.dayCompleteOrder * 100}%`"></div> -->
                <progress class="progress progress-info " style="max-height: 10px;" :value="state.completeOrders"
                    :max="state.dayCompleteOrder"></progress>
            </div>
        </div>
        <div class="mt-4 flex justify-between items-center gap-1">
            <div class="bg-[url('@/assets/images/mineIcon1.jpeg')] w-[35%] h-[87px] bg-right  bg-no-repeat bg-cover rounded-md py-[15px] px-[5px] flex flex-col  "
                style=" background-size: 100% 100%;">
                <p class="text-[12px] mb-[12px]">{{ $t('Account Balance') }}</p>
                <p class="text-[15px]">${{ formatPrice(state.balance) }}</p>
            </div>
            <div class="bg-[url('@/assets/images/mineIcon2.jpeg')] w-[35%] h-[87px] rounded-md  px-[15px] bg-right  bg-no-repeat bg-cover "
                style="background-size: 100% 100%;" @click="goTo('/deposit')">
                <p class="pt-[20px] text-[18px] text-center text-[#0077FF]">{{ $t('Deposit') }}</p>
            </div>
            <div class="bg-[url('@/assets/images/mineIcon2.jpeg')] w-[35%] h-[87px] rounded-md px-[15px] bg-right  bg-no-repeat bg-cover"
                style="background-size: 100% 100%;" @click="goTo('/withdraw')">
                <p class="pt-[20px] text-[18px] text-center text-[#0077FF]">{{ $t('Withdraw') }}</p>
            </div>
        </div>
        <ul class="pt-2">
            <li @click="goTo('/address')" class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <!-- <div class="text-font-size">{{ $t('Shipping Address') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" /> -->
                <span class="text-font-size">{{ $t('Shipping Address') }}</span>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
            <li @click="goTo('/withdraw/record')"
                class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <div class="text-font-size">{{ $t('Withdraw Record') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
            <li @click="goTo('/detail')" class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <div class="text-font-size">{{ $t('Detailed Bills') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
            <li @click="goTo('/bank')" class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <div class="text-font-size">{{ $t('Payment Card') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
            <li @click="goTo('/password')" class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <div class="text-font-size">{{ $t('Find Your Password') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
            <li @click="goTo('/password/assets')"
                class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <div class="text-font-size">{{ $t('Fund Password') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
            <li @click="goTo('/language')" class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <div class="text-font-size">{{ $t('Language') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
            <li @click="exit" class="flex items-center justify-between cursor-pointer pt-2  leading-3">
                <div class="text-font-size">{{ $t('Log out') }}</div>
                <ChevronRightIcon class="w-2 h-2 text-black" />
            </li>
        </ul>
    </div>
    <div class="h-1 mb-6"></div>

</template>
